﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>组合样式</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>普通组合</h5>
			<p>
				<span class="group">
					<span class="addon">￥</span>
					<input class="textbox" type="text">
					<span class="addon">.00</span>
				</span>
			</p>

			<hr class="hr" />

			<h5>颜色组合</h5>
			<p>
				<span class="group info">
					<span class="addon">￥</span>
					<input class="textbox" type="text">
					<span class="addon">.00</span>
				</span>

				<hr class="hr hr-dotted" />

				<span class="group warning">
					<span class="addon">￥</span>
					<input class="textbox" type="text">
					<span class="addon">.00</span>
				</span>

				<hr class="hr hr-dotted" />

				<span class="group success">
					<span class="addon">￥</span>
					<input class="textbox" type="text">
					<span class="addon">.00</span>
				</span>

				<hr class="hr hr-dotted" />

				<span class="group danger">
					<span class="addon">￥</span>
					<input class="textbox" type="text">
					<span class="addon">.00</span>
				</span>
			</p>

			<hr class="hr" />

			<h5>多控件组合</h5>
			<p>
				<div class="group">
					<div class="addon">￥</div>
					<input class="textbox" type="text">
					<div class="addon">-</div>
					<input class="textbox" type="text">
					<button class="btn">确定</button>
				</div>
			</p>

			<hr class="hr" />

			<h5>方角方案</h5>
			<p>
				<div class="group square">
					<div class="addon">￥</div>
					<input class="textbox" type="text">
					<div class="addon">-</div>
					<input class="textbox" type="text">
					<button class="btn">确定</button>
				</div>
			</p>

			<hr class="hr" />

			<h5>尺寸方案</h5>
			<p>
				<span class="group sm">
					<span class="addon">￥</span>
					<input class="textbox" type="text">
					<span class="addon">-</span>
					<input class="textbox" type="text">
					<button class="btn">确定</button>
				</span>

				<hr class="hr hr-dotted" />

				<span class="group">
					<span class="addon">￥</span>
					<input class="textbox" type="text">
					<span class="addon">-</span>
					<input class="textbox" type="text">
					<button class="btn">确定</button>
				</span>

				<hr class="hr hr-dotted" />

				<span class="group lg">
					<span class="addon">￥</span>
					<input class="textbox" type="text">
					<span class="addon">-</span>
					<input class="textbox" type="text">
					<button class="btn">确定</button>
				</span>
			</p>

			<hr class="hr" />

			<h5>多按钮组合</h5>
			<p>
				<span class="group">
					<button class="btn">按钮1</button>
					<button class="btn">按钮2</button>
					<button class="btn">按钮3</button>
					<button class="btn">按钮4</button>
					<button class="btn">按钮5</button>
				</span>
			</p>

			<hr class="hr" />

			<h5>多控件组合</h5>
			<p>
				<span class="group">
					<button class="btn">按钮</button>
					<input type="text" class="textbox" />
					<input ud2="number" />
					<input ud2="range" ud2-range-both="true" />
				</span>
			</p>

			<hr class="hr" />

			<h5>通栏</h5>
			<p>
				<span class="group group-justify">
					<button class="btn">按钮1</button>
					<button class="btn">按钮2</button>
					<button class="btn">按钮3</button>
					<button class="btn">按钮4</button>
					<button class="btn">按钮5</button>
				</span>

				<hr class="hr hr-dotted" />

				<span class="group group-justify">
					<span class="addon noflex">￥</span>
					<input ud2="number">
					<input ud2="number">
					<button class="btn noflex">按钮1</button>
				</span>
			</p>
		</div>
	</fieldset>

</body>
</html>
